<script setup>
import { ref, computed, onMounted } from 'vue'
import { useAuthStore } from '../store/auth'
import PermissionWrapper from '../components/PermissionWrapper.vue'

const authStore = useAuthStore()

// 统计数据
const stats = ref({
  totalUsers: 1248,
  totalRoles: 12,
  totalMenus: 35,
  onlineUsers: 892
})

// 用户信息
const userInfo = computed(() => authStore.userInfo)
const userName = computed(() => authStore.userName)
const userRole = computed(() => authStore.userRole)

// 快捷操作
const quickActions = ref([
  {
    title: '用户管理',
    description: '管理系统用户',
    icon: 'User',
    path: '/system/user',
    permission: 'user:view',
    color: '#409eff'
  },
  {
    title: '角色管理',
    description: '管理用户角色',
    icon: 'UserFilled',
    path: '/system/role',
    permission: 'role:view',
    color: '#67c23a'
  },
  {
    title: '菜单管理',
    description: '管理系统菜单',
    icon: 'Menu',
    path: '/system/menu',
    permission: 'menu:view',
    color: '#e6a23c'
  },
  {
    title: '系统设置',
    description: '系统基础配置',
    icon: 'Setting',
    path: '/settings',
    permission: 'system:settings',
    color: '#f56c6c'
  }
])

// 最近活动
const recentActivities = ref([
  { user: '张三', action: '登录系统', time: '2分钟前' },
  { user: '李四', action: '创建用户', time: '5分钟前' },
  { user: '王五', action: '修改角色权限', time: '10分钟前' },
  { user: '赵六', action: '更新菜单配置', time: '15分钟前' },
  { user: '刘七', action: '导出用户数据', time: '20分钟前' }
])

onMounted(() => {
  // 模拟获取统计数据
  console.log('仪表盘已加载')
})
</script>

<template>
  <div class="dashboard">
    <!-- 欢迎信息 -->
    <div class="welcome-card">
      <div class="welcome-content">
        <div class="welcome-text">
          <h2>欢迎回来，{{ userName }}！</h2>
          <p>当前角色：{{ userRole }} | 今天是个美好的一天</p>
        </div>
        <div class="welcome-avatar">
          <el-avatar 
            :src="userInfo.avatar" 
            :size="60"
          >
            {{ userName.charAt(0) }}
          </el-avatar>
        </div>
      </div>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-icon" style="background: #409eff20;">
          <el-icon size="24" color="#409eff"><User /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.totalUsers }}</div>
          <div class="stat-label">总用户数</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon" style="background: #67c23a20;">
          <el-icon size="24" color="#67c23a"><UserFilled /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.totalRoles }}</div>
          <div class="stat-label">角色数量</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon" style="background: #e6a23c20;">
          <el-icon size="24" color="#e6a23c"><Menu /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.totalMenus }}</div>
          <div class="stat-label">菜单数量</div>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon" style="background: #f56c6c20;">
          <el-icon size="24" color="#f56c6c"><Connection /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.onlineUsers }}</div>
          <div class="stat-label">在线用户</div>
        </div>
      </div>
    </div>

    <div class="dashboard-content">
      <!-- 快捷操作 -->
      <div class="quick-actions">
        <div class="section-header">
          <h3>快捷操作</h3>
        </div>
        <div class="actions-grid">
          <PermissionWrapper
            v-for="action in quickActions"
            :key="action.title"
            :permission="action.permission"
          >
            <div class="action-card" @click="$router.push(action.path)">
              <div class="action-icon" :style="{ background: action.color + '20' }">
                <el-icon :size="32" :color="action.color">
                  <component :is="action.icon" />
                </el-icon>
              </div>
              <div class="action-content">
                <h4>{{ action.title }}</h4>
                <p>{{ action.description }}</p>
              </div>
            </div>
          </PermissionWrapper>
        </div>
      </div>

      <!-- 最近活动 -->
      <div class="recent-activities">
        <div class="section-header">
          <h3>最近活动</h3>
          <el-button type="text" size="small">查看更多</el-button>
        </div>
        <div class="activities-list">
          <div 
            v-for="(activity, index) in recentActivities"
            :key="index"
            class="activity-item"
          >
            <div class="activity-avatar">
              <el-avatar :size="32">
                {{ activity.user.charAt(0) }}
              </el-avatar>
            </div>
            <div class="activity-content">
              <div class="activity-text">
                <strong>{{ activity.user }}</strong> {{ activity.action }}
              </div>
              <div class="activity-time">{{ activity.time }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.dashboard {
  padding: 0;
  margin: 0;
  min-height: 100%;
  background: #f8fafc;
}

/* 欢迎卡片 */
.welcome-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.9) 100%);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 36px;
  margin-bottom: 32px;
  color: #1a202c;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.15);
}

.welcome-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  backdrop-filter: blur(10px);
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.welcome-text h2 {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.welcome-text p {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  line-height: 1.5;
}

.welcome-avatar {
  position: relative;
}

.welcome-avatar .el-avatar {
  border: 3px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* 统计卡片网格 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin: 0 24px 32px 24px;
}

.stat-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 28px;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
  border: none;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2);
}

.stat-card:hover::before {
  transform: scaleX(1);
}

.stat-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  transition: all 0.3s ease;
}

.stat-card:hover .stat-icon {
  transform: scale(1.1) rotate(5deg);
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 6px;
  line-height: 1;
}

.stat-label {
  font-size: 15px;
  color: #64748b;
  font-weight: 500;
  letter-spacing: 0.25px;
}

/* 仪表盘内容 */
.dashboard-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  margin: 0 24px;
}

/* 快捷操作 */
.quick-actions {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: none;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f1f5f9;
}

.section-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #1a202c;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.action-card {
  padding: 24px;
  border: 2px solid #f1f5f9;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0, 0, 1);
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  position: relative;
  overflow: hidden;
}

.action-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.action-card:hover {
  border-color: #667eea;
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(102, 126, 234, 0.15);
}

.action-card:hover::before {
  opacity: 1;
}

.action-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.action-card:hover .action-icon {
  transform: scale(1.1);
}

.action-content {
  position: relative;
  z-index: 2;
}

.action-content h4 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1a202c;
}

.action-content p {
  margin: 0;
  font-size: 14px;
  color: #64748b;
  line-height: 1.5;
}

/* 最近活动 */
.recent-activities {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: none;
}

.activities-list {
  max-height: 420px;
  overflow-y: auto;
}

.activities-list::-webkit-scrollbar {
  width: 4px;
}

.activities-list::-webkit-scrollbar-track {
  background: #f8fafc;
  border-radius: 2px;
}

.activities-list::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f8fafc;
  transition: all 0.2s ease;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-item:hover {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  margin: 0 -12px;
  padding: 16px 12px;
  border-radius: 8px;
}

.activity-avatar {
  margin-right: 16px;
}

.activity-avatar .el-avatar {
  border: 2px solid #f1f5f9;
  transition: border-color 0.2s ease;
}

.activity-item:hover .activity-avatar .el-avatar {
  border-color: #667eea;
}

.activity-content {
  flex: 1;
}

.activity-text {
  font-size: 15px;
  color: #374151;
  margin-bottom: 4px;
  font-weight: 500;
}

.activity-text strong {
  color: #1a202c;
  font-weight: 600;
}

.activity-time {
  font-size: 13px;
  color: #9ca3af;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .dashboard-content {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
  }
  
  .actions-grid {
    grid-template-columns: 1fr;
  }
  
  .welcome-content {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  
  .welcome-text h2 {
    font-size: 24px;
  }
  
  .dashboard-content {
    gap: 24px;
  }
  
  .quick-actions,
  .recent-activities {
    padding: 20px;
  }
}
</style>